<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./utils/jquery-3.6.0.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <style>
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <div class="div1">
        <img src="./images/u0.png">
            <div id="u2">
            <div id="u3">
                <p>医院不良事件上报系统</p>
            </div>
            <form style="position: absolute;top: 150px;left: 75px;" action="./pages/admin.html" method="get">
                <div class="form-group">
                  <label for="exampleInputEmail1">账号</label>
                  <input type="text" class="form-control user"  placeholder="请输入登录账号" name="user">
                  <span></span>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">密码</label>
                  <input type="password" class="form-control pass" id="exampleInputPassword1" placeholder="请输入登录密码" name="pass">
                  <span></span>
                </div>
                <button type="submit" class="btn btn-primary btn-lg" style="margin-left: 60px;">登录</button>
            </form>
            <div id="u19">
                <img src="./images/u19.png" alt="" style="width: 64px;height: 64px;">
            </div>
        </div>
    </div>
    <script>
        var oF=document.querySelector('form');
        var aInp = document.querySelectorAll('input');
        var rule={
        user:{
          reg:/^\w{6,14}$/,
          err:'请输入正确的账号'
        },
        pass:{
          reg:/^[A-Z][a-zA-Z0-9]{5,11}$/,
          err:'密码格式不正确！'
        },
    }
    function test(obj){
            var str = obj.value;
            if (str.trim() == '') {
                obj.nextElementSibling.innerHTML = '内容不能为空！';
                obj.nextElementSibling.className = 'red';
                return false
            } else if (rule[obj.name].reg.test(str) == false) {
                obj.nextElementSibling.innerHTML = rule[obj.name].err;
                obj.nextElementSibling.className = 'red';
                return false
            } else {
                obj.nextElementSibling.innerHTML = '√';
                obj.nextElementSibling.className = 'green';
                return true;
            }
        }
    for (var i = 0; i < aInp.length; i++) {
            aInp[i].onblur = function () {
                test(this);
            }
    }
    oF.onsubmit = function () {
            var b='能发送';
            for(var i=0;i<aInp.length;i++){
                if(test(aInp[i])==false){
                    b='不能发送'
                }
            }
            if(b=='不能发送'){
                event.preventDefault();
            }
        }
    </script>
</body>
</html>